
<template>
  <div>
    <XProvider
      :locale="locale"
      :theme="{
        algorithm:
          systemTheme === 'light'
            ? theme.defaultAlgorithm
            : theme.darkAlgorithm,
      }"
    >
      <a-card style="width: 80%; min-width: 600px; margin: 20px auto">
        <a-layout style="height: 500px; width: 100%; overflow: hidden">
          <a-layout-sider
            :collapsed="collapsed"
            :style="{
              background: systemTheme === 'light' ? '#fff' : 'rgb(30,30,30)',
              paddingRight: '24px',
            }"
          >
            <div
              style="
                display: flex;
                overflow: hidden;
                flex-direction: column;
                gap: 12px;
                height: 100%;
              "
            >
              <a-button
                :icon="h(PlusOutlined)"
                type="primary"
                size="large"
                style="width: 100%"
                >新对话</a-button
              >

              <div style="flex: 1; overflow-y: auto; scrollbar-width: none">
                <Conversations
                  :items="chatHistory"
                  :menu="menuConfig"
                  default-active-key="item1"
                  :style="{ padding: 0 }"
                />
              </div>
            </div>
          </a-layout-sider>
          <a-layout>
            <a-layout-content style="padding: 0">
              <Welcome
                style="padding: 24px; background: transparent"
                icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
                title="🚀 Hello!,我是你的代码助手，准备好一起高效编码了吗？"
                description="我可以帮您完成系统设计,代码编写,代码优化,代码重构等工作。"
              />
              <div style="padding: 24px">
                <Prompts
                  wrap
                  :styles="{
                    item: {
                      flex: 'none',
                      width: 'calc(50% - 6px)',
                      border: 0,
                    },
                  }"
                  title="✨ 可以试试下面的问题"
                  :items="items"
                  :on-item-click="
                    (info) => {
                      message.success(
                        `You clicked a prompt: ${info.data.key}`
                      );
                    }
                  "
                />
              </div>
            </a-layout-content>
            <a-layout-footer style="padding: 24px">
              <Flex vertical gap="middle">
                <Sender
                  v-model:value="value"
                  :loading="loading"
                  :auto-size="{ minRows: 2, maxRows: 6 }"
                  @submit="
                    () => {
                      value = '';
                      loading = true;
                      messageApi.info('Send message!');
                    }
                  "
                  @cancel="
                    () => {
                      loading = false;
                      messageApi.error('Cancel sending!');
                    }
                  "
                />
              </Flex>
            </a-layout-footer>
          </a-layout>
        </a-layout>
      </a-card>
    </XProvider>
  </div>
</template>

<script setup>
import {
  Welcome,
  Conversations,
  Prompts,
  Sender,
  Attachments,
} from "ant-design-x-vue";
import {
  BulbOutlined,
  InfoCircleOutlined,
  RocketOutlined,
  EditOutlined,
  StopOutlined,
  DeleteOutlined,
  SmileOutlined,
  MoreOutlined,
  PlusOutlined,
  PlusSquareOutlined,
  WarningOutlined,
} from "@ant-design/icons-vue";
import { useSystemConfig } from "@/store/systemConfig.js";
import { theme, Flex, message } from "ant-design-vue";
import { computed, ref, h } from "vue";
import zhCN from "ant-design-vue/es/locale/zh_CN";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
dayjs.locale("zh-cn");

const [messageApi, contextHolder] = message.useMessage();

const locale = zhCN;

const items = [
  {
    key: "1",
    icon: h(BulbOutlined, { style: { color: "#FFD700" } }),
    description: "帮我设计一个用户管理的数据库",
  },
  {
    key: "2",
    icon: h(InfoCircleOutlined, { style: { color: "#1890FF" } }),
    description: "帮我生成一个用户管理页面",
  },
  {
    key: "3",
    icon: h(RocketOutlined, { style: { color: "#722ED1" } }),
    description: "帮我生成一个用户管理的API接口",
  },
  {
    key: "4",
    icon: h(RocketOutlined, { style: { color: "#722ED1" } }),
    description: "帮我修改这段代码的bug",
  },
];

const chatHistory = Array.from({ length: 20 }).map((_, index) => ({
  key: `item${index + 1}`,
  label: `Conversation Item ${index + 1}`,
}));
const menuConfig = (conversation) => ({
  trigger: (menuInfo) =>
    h(MoreOutlined, {
      onClick: () => {
        console.log(`Click ${conversation.key} - ${menuInfo.key}`);
      },
    }),
  items: [
    {
      label: "编辑",
      key: "edit",
      icon: h(EditOutlined),
    },

    {
      label: "删除",
      key: "delete",
      icon: h(DeleteOutlined),
      danger: true,
    },
  ],
  onClick: (menuInfo) => {
    menuInfo.domEvent.stopPropagation();
    console.log(`Click ${conversation.key} - ${menuInfo.key}`);
  },
});

const systemConfig = useSystemConfig();
// 主题 light dark fixed
const systemTheme = computed(() => {
  if (systemConfig.theme === "dark") {
    return "dark";
  } else {
    return "light";
  }
});

const value = ref("Hello? this is X!");
const loading = ref(false);
</script>

<style scoped>
</style>
